<template>
  <div class="app">
    <div class="dafaaf">
      <div class="heads">
        <img src="@/assets/1.png" alt />
      </div>
      <div class="aaffafff">
        <div>尝新</div>
        <div>尝热</div>
        <div>尝潮流</div>
      </div>
    </div>
    <div class="register-wrapper">
      <div class="boxs">
        <div style="font-size: 25px;margin: 20px 0px 30px 20px;">找回密码</div>
        <div>
          <el-steps :active="active" align-center>
            <el-step title="验证身份"></el-step>
            <el-step title="重置密码"></el-step>
            <el-step title="重置成功"></el-step>
          </el-steps>
          <div class="forms">
            <el-form v-if="active==1" label-position="right" label-width="100px">
              <el-form-item label="账号:">
                <el-input v-model="phone" placeholder="请输入手机号"></el-input>
              </el-form-item>
              <el-form-item label="验证码:" class="code">
                <el-input v-model="codes" placeholder="验证码"></el-input>
                <el-button type="primary" :disabled="isDisabled" @click="sendCode">{{buttonText}}</el-button>
              </el-form-item>
              <el-button style="display:block;margin:0 auto;" @click="active=2">下一步</el-button>
            </el-form>
            <el-form v-if="active==2" label-position="right" label-width="100px">
              <el-form-item label="输入新密码:">
                <el-input v-model="phone" placeholder="请输6-20位数字，字母以及符号"></el-input>
              </el-form-item>
              <el-form-item label="确认密码:">
                <el-input v-model="phone" placeholder="请再次输入上面的密码"></el-input>
              </el-form-item>
              <el-button style="display:block;margin:0 auto;" @click="active=3">下一步</el-button>
            </el-form>
            <p v-if="active==3" style="text-align: center">
                密码设置成功，请返回<span style="color:blue" @click="$router.push('/merchantSignIn')">登录</span>
            </p>
          </div>
        </div>
        <p style="text-align: center;margin-top: 10%;">如果您忘记密码,将无法找回您的账号信息,您可以点击这里<span style="color:blue" @click="$router.push('/merchantRegister')">重新注册</span>。</p>
      </div>
    </div>
  </div>
</template>
<script>
import { messages } from "@/apiUrl/login";
export default {
  name: "forgetPassword",
  data() {
    return {
      active: 1,
      isDisabled: false,
      phone: "",
      codes: "",
      flag: true,
      buttonText: "发送验证码"
    };
  },
  methods: {
    sendCode() {
      let _th = this;
      let tel = this.phone;
      if (this.checkMobile(tel)) {
        let time = 60;
        this.buttonText = "已发送";
        this.isDisabled = true;
        var datas = {
          mobile: tel
        };
        messages(datas)
          .then(res => {
            console.log(res);
          })
          .catch(err => {
            console.log(err);
          });
        if (this.flag) {
          this.flag = false;
          let timer = setInterval(() => {
            time--;
            this.buttonText = time + " 秒";
            if (time === 0) {
              clearInterval(timer);
              this.buttonText = "重新获取";
              this.isDisabled = false;
              this.flag = true;
            }
          }, 1000);
        }
      }else{
          this.$message({
              message:"请先输入手机号",
              type:'warning'
          })
      }
    },
    checkMobile(str) {
      let re = /^1\d{10}$/;
      if (re.test(str)) {
        return true;
      } else {
        return false;
      }
    }
  }
};
</script>

<style scoped>
.app {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}
.dafaaf {
  width: 100%;
  height: 108px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}
.heads {
  width: 239px;
  height: 100%;
  margin-left: 109px;
}
.heads img {
  width: 100%;
  margin-top: 24px;
}
.aaffafff {
  width: 223px;
  display: flex;
  justify-content: space-between;
  margin-right: 200px;
}
.aaffafff div {
  font-size: 24px;
  line-height: 100px;
  color: #ec8741;
  margin-top: 20px;
}
.register-wrapper {
  width: 100%;
  position: absolute;
  top: 108px;
  bottom: 0px;
  left: 0px;
  background: url(../assets/loginBg.png) no-repeat center center;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.boxs {
  width: 1000px;
  height: 500px;
  background-color: white;
}
.forms {
  width: 35%;
  margin: 50px auto;
}
.code >>> .el-form-item__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.code button {
  margin-left: 20px;
  width: 140px;
  text-align: center;
}
</style>